<template>
	<view class="coupon_wrapper">
		<view class="search_wrap">
			<u--input placeholder="请输入优惠码" clearable shape="circle" v-model="keyword"></u--input>
			<u--text type="error" text="兑换" @click="searchExchange"></u--text>
		</view>
		<Tabs style="background-color: #fff;" :sendData="tabConfig" @changeTabs="changeTabs" />
		<view class="tabs_list" v-if="tabsList.length > 0">
			<view class="tabs_item" v-for="item in tabsList" :key="item.id" @click="GotoWxChat(item.k_id)">
				<view class="item_left_wrap">
					<view class="price"><text>{{item.valueDesc}}</text>元</view>
					<view class="intro">{{item.condition}}</view>
				</view>
				<view class="item_right_wrap">
					<view class="title">{{item.name}}</view>
					<view class="time">{{moment(item.startAt)}}-{{moment(item.endAt)}}</view>
				</view>
			</view>
			<view class="noMore">没有更多数据了哦~~</view>
		</view>		
		<view class="noData" v-else>
			<i class="iconfont icon-zanwushuju"></i>
			<text class="name">暂无优惠券</text>
		</view>	
	</view>
</template>

<script>
	import { api_getWxAgreeAdress,api_getHasCoupon,api_getDisabledCoupon,api_getExchangeCode } from '@/api/api'
	import config from '@/utils/config'
	import * as type from '@/utils/device'
	import Tabs from '@/components/custom_tabs/index.vue'
	export default {
		components: { Tabs },
		data() {
			return {
				tabConfig: {
					index: 0,
					activeColor: '#333',
					activeBorderColor: '#f00',
					list: ['可用','不可用'],
				},
				tabsList: [],
				total: 0,
				keyword: ''
			}
		},
		computed: {
			device(){
				return type.default;
			}			
		},
		onLoad(options) {
			this.init(options);
		},
		created(){
			
		},
		methods: {
			init(opt){	// 初始化
				let query = { page: 1, limit: 1000,keyword: '' }
				this.tabConfig.index = opt.subIndex;
				uni.showLoading({ title: '数据加载中...' });
				if (opt.subIndex > 0) {					
					api_getDisabledCoupon(query).then(res => {
						let { code,data: {list,total},msg } = res;
						uni.hideLoading();
						if (code == 1) {
							this.tabsList = list || [];
							this.total = total;
						} else {
							uni.showToast({ title: msg,icon: 'error' });
						}
					}).catch(err => {
						uni.hideLoading();
						console.log(err);
					})
				} else {
					api_getHasCoupon(query).then(res => {
						let { code,data: {list,total},msg } = res;
						uni.hideLoading();
						if (code == 1) {
							this.tabsList = list;
							this.total = total;
						} else {
							uni.showToast({ title: msg,icon: 'error' });
						}
					}).catch(err => {
						uni.hideLoading();
						console.log(err);
					})
				}
			},
			searchExchange(){	// 兑换
				if (!this.keyword) {
					uni.showToast({	title: '兑换码为空',icon: 'error' });
					return;
				}
				api_getExchangeCode({dhm: this.keyword }).then(res => {
					uni.hideLoading();
					uni.showToast({ title: res.msg,icon: res.code == 1 ? 'success' : 'error' });
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				})				
			},
			changeTabs(i){	// 面包屑导航接收值
				const pages = getCurrentPages()
				const currentRoute = this.device == 'MP-WEIXIN' ? '/'+pages[pages.length - 1].route : pages[pages.length - 1].$route.path;
				uni.redirectTo({ url: `${currentRoute}?subIndex=${i}` });		
			},
			GotoWxChat(id){	// 跳转至客户端
				console.log('goto wxchat',id);
				let FrontUrl = window.location.protocol + '//' + window.location.host;
				let nexturl = FrontUrl + `/pages/orderone/index?id=${id}`; 
				let url = config.baseURL + '/user/wxzhifu/getweixinopenid' + `?nexturl=${encodeURIComponent(nexturl)}`;
				window.location.href = url;
			},
			moment(time){	// 日期转换
				let curDate = new Date(parseInt(time) * 1000);
				let [ YY,MM,DD ] = [ curDate.getFullYear(),curDate.getMonth()+1,curDate.getDate()];
				function format(p){	return p > 9 ? p : '0' + p };
				return YY +'.'+ format(MM) +'.'+ format(DD);
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.coupon_wrapper{
	height: calc(100vh - 50px);
	background-color: #f7f8fa;
	.search_wrap{
		width: 100%;
		position: relative;
		background-color: #fff;
		padding: 5px 70px 10px 20px;
		box-sizing: border-box;
		.u-input{
			background-color: #f7f8fa;
			border: none;
		}
		.u-text{
			display: block;
			width: auto;
			line-height: 44px;
			position: absolute;
			right: 20px;
			top: 0;
		}
	}
	.tabs_list{
		padding: 15px 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		.tabs_item{
			display: flex;
			align-items: center;
			overflow: hidden;
			padding: 14px 10px;
			margin: 0 12px 12px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 0 4px rgba(0,0,0,.1);
			.item_left_wrap{
				width: 100px;
				text-align: center;
				color: #ee0a24;
				.price{
					font-size: 12px;
					margin: 0 0 5px 0;
					text{
						font-size: 24px;
						margin: 0 5px 0 0;
					}
				}
				.intro{
					font-size: 12px;
				}
			}
			.item_right_wrap{
				padding: 0 0 0 10px;
				.title{
					font-size: 14px;
					font-weight: bold;
				}
				.time{
					font-size: 12px;
					margin: 10px 0 0;
				}
			}
		}
		.noMore{
			font-size: 14px;
			text-align: center;
			color: #ccc;
			margin: 20px 0 0;
		}
	}
	.noData{
		margin: 50px auto 0;
		text-align: center;
		.iconfont{
			display: block;
			margin: 0 auto;
			font-size: 100px;
			color: gray;
		}
		.name{
			font-size: 14px;
			color: #999;
		}
	}
}
</style>
